<!DOCTYPE HTML>

<html>
<head>
<meta http-equiv="Content-type" content="application/x-www-form-urlencoded; charset=UTF-8">

<meta name="keywords" lang="de" content="Geocaching, Cache, Caches, Maps, Google Maps, Google Maps API">
<meta name="keywords" lang="en" content="Geocaching, Cache, Caches, Maps, Google Maps, Google Maps API Koordinaten">

<link id="favicon" rel="icon shortcut" href="images/icons/globe.ico" type="image/x-icon">

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
<link href="primeui/primeui-1.0-min.css" rel="stylesheet" type="text/css">
<link href="css/geocaching.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry,places&sensor=false"></script>

<script type="text/javascript" src="scripts/3rdPartyLibs/jquery.i18n.properties-min.js"></script>
<script type="text/javascript" src="scripts/3rdPartyLibs/jquery.maskedinput-1.3.min.js"></script>
<script type="text/javascript" src="scripts/3rdPartyLibs/markerclusterer.js"></script>

<script type="text/javascript" src="primeui/primeui-1.0-min.js"></script>

<script type="text/javascript" src="scripts/initializePage.min.js"></script>


</head>

<body>
	<div id="tabs" class="tabs">
	
		<h2 id="mainTitle" data-i18n-key="main.title">GottfriedEgger's Geocaching page</h2>
		<span style="float: right;"><a href="#" onclick="translatePage('en');">EN</a> | <a href="#" onclick="translatePage('de');">DE</a></span>

        <div id="warningDialogPlaceholder" title="Warnung">content</div>

		<!-- tabs -->
		<ul class="tabNavigation">
			<li><a href="#googleMapsTabContent" data-i18n-key="tab.maps">Google Maps</a></li>
			<li><a href="#toolsTabContent" data-i18n-key="tab.tools">Tools</a></li>
			<li><a href="#tatortTabContent" id="tatortTab" data-i18n-key="tab.tatort">Tatort</a></li>
		</ul>

		<!-- tab containers -->
		<div id="googleMapsTabContent">
			<div id="mapCommands" class="mapCommandsPanel" style="visibility: collapse; width: 430px; position: absolute;  z-index: 10;">
				<div id="mapCommandsContentWrapper" class="mapCommandsContentWrapper overflowScroll">
					<div id="mapCommandsContent" class="mapCommandsContent paddingLeft10">

						<h5 data-i18n-key="map.load.title">Gefundene Caches darstellen</h5>
						<input type="file" id="files" name="file" />
						<button data-i18n-key="map.load.finds" data-i18n-title-key="map.load.finds.tooltip"
                                title="Lade das Pocket Query 'meine Funde'" onclick="readFile();" >
                            Lade gefundene Caches
                        </button>

						<br><br>

						<input type="checkbox" id="useClustering" onclick="toggleClusterer();" >
						<label for="useClustering" data-i18n-key="map.use_clustering">Mit Clustering</label>
						<hr>

						<h5 data-i18n-key="map.search.title">Nach Adresse, Platz oder Koordinaten suchen</h5>
						<input type="text" id="addressSearchTxtMainMap" data-enter-action-button-id="addressSearchBtnMap" placeholder="" size="30">

						<button id="addressSearchBtnMap" data-i18n-key="map.search"
                                onclick="searchLocationAndDisplay(mainMap, 'addressSearchTxtMainMap');">Suchen</button>
						<hr>
						
						<h5 data-i18n-key="map.distance.title">Gefundene Caches darstellen</h5>
						<ul class="formList">
							<li>
								<label for="distanceFrom" data-i18n-key="map.distance.from">Von:</label>
								<span>
                                    <input type="text" id="distanceFrom" data-enter-action-button-id="displayDistance"
                                           data-i18n-placeholder-key="map.distance.from.placeholder" placeholder="Ausgangspunkt">
                                </span>
							</li>
							<li>
								<label for="distanceTo" data-i18n-key="map.distance.to">Bis:</label>
                                <span>
								    <input type="text" id="distanceTo" data-enter-action-button-id="displayDistance"
                                           data-i18n-placeholder-key="map.distance.to.placeholder" placeholder="Endpunkt">
                                </span>
							</li>
							<li>
								<label for="angle" data-i18n-key="map.distance.degrees">Winkel:</label>
                                <span id="angle"></span>
							</li>
							<li>
								<label for="distance" data-i18n-key="map.distance.distance">Distanz:</label>
                                <span id="distance"></span>
							</li>
						</ul>
							
						<button data-i18n-key="map.distance.display" id="displayDistance" onclick="displayDistance();">Distanz anzeigen</button>
						
						<hr>
                        <ul>
                            <li>
						        <button onclick="clearMap();" data-i18n-key="map.clear">Karte leeren</button>
                            </li>
                        </ul>

					</div>
				</div>
				
				<div id="sliderMap" class="slider sliderOpen" ></div>
			</div>
		
			<div id="map" class="map"></div>
		</div>

		<div id="toolsTabContent">
			<fieldset>
                <legend data-i18n-key="tools.coordinates_convertion">Koordinaten konvertieren</legend>

                <div class="box_left">
                    <label for="inputCoordinates" data-i18n-key="tools.coordinates">Koordinaten</label>
                    <img src="images/info_16x16.png"
                        title="WGS84 / CH1903 Script: http://www.swisstopo.admin.ch/internet/swisstopo/en/home/products/software/products/skripts.html" />
                    <input id="inputCoordinates" type="text" size="20" data-i18n-placeholder-key="tools.coordinates.placeholder"/>
                    <button onclick="convertCoordinates();" data-i18n-key="tools.convert">konvertieren</button>
                </div>
				<div id="convertedCoordinatesWGS" class="box_right"></div>
				<div id="convertedCoordinatesCH" class="box_right"></div>
			</fieldset>

            <fieldset>
				<legend data-i18n-key="tools.letter_calculation">Buchstabenwerte berechnen</legend>
				<div class="box_left">
                    <input id="calcLetterInp" type="text" onkeyup="calculateLetterValuesAndDisplayResults();"
                            data-i18n-placeholder-key="tools.letter_calculation.placeholder" placeholder="Text eingeben" />
				</div>

				<div id="calculations" class="box_right">
                    <dl class="dlCalculation">
                        <dt>
                            <label id="sum" data-i18n-key="tools.sum">Summe:</label>
                        </dt>
                        <dd></dd>
                        <dt>
                            <label id="singleLetterValue" data-i18n-key="tools.single_letters">Buchstaben einzeln:</label>
                        </dt>
                        <dd></dd>
                        <dt>
                            <label id="product" data-i18n-key="tools.product">Produkt:</label>
                        </dt>
                        <dd></dd>
                        <dt>
                            <label id="checksum" data-i18n-key="tools.checksum">Quersumme:</label>
                        </dt>
                        <dd></dd>
                        <dt>
                            <label id="oneDigitChecksum" data-i18n-key="tools.one_digit_checksum">Einstellige Quersumme:</label>
                        </dt>
                        <dd></dd>
                    </dl>
				</div>
			</fieldset>

			<fieldset>
				<legend data-i18n-key="tools.caesar_rot13.title">Cäsar Chiffre / ROT13</legend>
				<table>
                    <tr>
                        <td style="vertical-align: top;">
                            <label>ROT</label>

                            <script type="text/javascript">
                                document.writeln('<select id="rotationCount" onclick="calculateRot()" onkeyup="calculateRot()">');

                                for(var x=0; x<26; x++){
                                    if(x === 13){
                                        document.writeln('<option value="'+ x + '" selected="selected">' + x + '</option>');
                                    }else{
                                        document.writeln('<option value="'+ x + '">' + x + '</option>');
                                    }
                                }

                                document.writeln('</select>');

                            </script>
                        </td>
                        <td style="width: 800px;">
                            <textarea id="rotationInput" rows="3" onkeyup="calculateRot()" style="width: 100%;"
                                      data-i18n-placeholder-key="tools.caesar_rot13.placeholder" placeholder="Zu verschlüsselnden Text eingeben"></textarea>
                            <br><br>
                        </td>
                    </tr>
					<tr>
						<td><span data-i18n-key="tools.caesar_rot13.result">Resultat:</span></td>
						<td><div id="rotationResult" style="width: 100%;"></div></td>
					</tr>
				</table>
			</fieldset>
		</div>

        <div id="tatortTabContent">

            <div id="tatortDialogPlaceholder" title="Tatort Geocache">content</div>

            <div id="tatortCommands" class="mapCommandsPanel" style="visibility: collapse; width: 430px; position: absolute;  z-index: 10;" >
                <div id="tatortCommandsContentWrapper" class="mapCommandsContentWrapper overflowScroll">
                    <div id="tatortCommandsContent" class="commandPanelContent paddingLeft10">
                        <h5 data-i18n-key="map.search.title">Nach Adresse, Platz oder Koordinaten suchen</h5>
                        <input type="text" id="addressSearchTxtTatort" data-enter-action-button-id="addressSearchBtnTatort" placeholder="" size="30">

                        <button id="addressSearchBtnTatort" data-i18n-key="map.search" onclick="searchLocationAndDisplayTatort('addressSearchTxtTatort');">Suchen</button>

                        <p data-i18n-key="tatort.show_current_question" onclick="showCurrentQuestion()" class="fakeLink">Aktuelle Frage anzeigen</p>
                    </div>
                </div>

                <div id="sliderTatort" class="slider sliderOpen" ></div>
            </div>


            <div id="mapTatort" class="map"></div>

        </div>
	</div>

	<div id="footer" style="float: right">
		Software by <a href="http://www.geocaching.com/profile/">GottfriedEgger</a>
	</div>
	
	<script type="text/javascript" src="scripts/3rdPartyLibs/wgs84_ch1903.js"></script>
	<script type="text/javascript" src="scripts/common.min.js"></script>
	<script type="text/javascript" src="scripts/cachingMaps.min.js"></script>
	<script type="text/javascript" src="scripts/calculating.min.js"></script>
	<script type="text/javascript" src="scripts/coordinates.min.js"></script>
	<script type="text/javascript" src="scripts/tatort.min.js"></script>
</body>
</html>